<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/layui/step-lay/step.css">
    <link rel="stylesheet" href="../static/bootstrap-dist/css/bootstrap.min.css">
    <style>
        * {
            font-size: 14px;
        }

        .layui-form-label {
            width: 100px;
        }

        .container {
            padding-top: 20px;
        }

        .fade-in-left {
            animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
        }

        @keyframes fade-in-left {
            0% {
                transform: translateX(-50px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
<div class="container col-8">

    <div class="layui-carousel" id="stepForm" lay-filter="stepForm">
        <div carousel-item class="mt-5">
            <div>
                <form id="form" class="layui-form fade-in-left" action="">

                    <div class="layui-form-item">
                        <label class="layui-form-label">验证码</label>
                        <div class="layui-input-inline w-50">
                            <input id="captchaText" name="" required lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input">
                        </div>
                        <button type="button" id="sendCaptcha" class="layui-btn">点击发送验证码</button>
                    </div>

                    <br>

                    <div class="layui-form-item">
                        <div class="layui-input-block ml-0 text-center">
                            <button lay-filter="next" lay-submit class="layui-btn w-25">下一步</button>
                        </div>
                    </div>

                </form>
            </div>
            <div>
                <form id="form1" class="layui-form fade-in-left" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-inline w-75">
                            <input type="password" name="" required lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">确认密码</label>
                        <div class="layui-input-inline w-75">
                            <input type="password" id="newPassword" name="" required lay-verify="required" placeholder="请确认新密码" autocomplete="off" class="layui-input">
                        </div>
                    </div>

                    <br>

                    <div class="layui-form-item">
                        <div class="layui-input-block ml-0 text-center">
                            <button id="up" class="layui-btn layui-btn-normal" type="button">上一步</button>
                            <button lay-filter="pwdSubmit"  id="changePwd" class="layui-btn w-25" type="button">完成修改</button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

<%--    <p style="font-weight: bold" id="header">我们将发送验证码到您绑定的邮箱</p>--%>

<%--    <div id="" lay-filter="pro" class="layui-progress mb-5 layui-progress-big">
        <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
    </div>--%>



</div>
<script src="../static/bootstrap-dist/js/jquery-3.5.1.js"></script>
<script src="../static/layui/layui.js"></script>
<script src="../static/layui/step-lay/step.js"></script>
<script !src="">
    layui.config({
        base:'../step/step-lay/'
    }).use(['table', 'layer', 'laydate', 'form','element','step'], function () {
        let $ = layui.$;
        let table = layui.table;
        let layer = layui.layer;
        let laydate = layui.laydate;
        let form = layui.form;
        let element = layui.element;
        let step = layui.step;

        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%', //设置容器宽度
            stepWidth: '750px',
            height: '500px',
            stepItems: [{
                title: '发送验证码到您绑定的邮箱'
            }, {
                title: '设置密码'
            }]
        });

        form.on('submit(next)', function (data){
            step.next('#stepForm');

            return false;
        });

        $("#up").click(function (){
            step.pre('#stepForm');
        })

        $("#sendCaptcha").click(function () {
            $("#sendCaptcha").attr("disabled",true);
            let time=60;
            let interval= setInterval(function () {
                $("#sendCaptcha").text(time+"秒后重新发送！");
                time--;
                if (time==0){
                    $("#sendCaptcha").attr("disabled",false);
                    $("#sendCaptcha").text("点击发送验证码");
                    clearInterval(interval);
                }
            },1000);
            $.ajax({
                type:"post",
                url:"sendCaptcha",
                data:{
                    "tag":"getSessionEmail",
                    "opr":"byEmail"
                }
            });
        });

        $("#changePwd").click(function () {
            $.ajax({
                url:"user",
                data:{
                    "opr":"changePwd",
                    "captcha":$("#captchaText").val(),
                    "tag":"getSessionEmail",
                    "newPassword":$("#newPassword").val()
                },
                beforeSend:function(){
                    let ii = layer.load();
                    //此处用setTimeout演示ajax的回调
                    setTimeout(function(){
                        layer.close(ii);
                    }, 1000);
                },
                success:function (result) {
                    if (result=="failed"){
                        layer.msg("验证码错误！");
                    }else {
                        layer.msg("更改成功");
                        $("#changePwd").attr("disabled",true);
                    }
                }
            });
        });
    })

    // layui.use(['table', 'layer', 'laydate', 'form','element'], function () {
    //
    //
    //     form.on('submit(pwdSubmit)', function (data) {
    //       /* data.field.u_id,*/
    //         layer.alert("123")
    //         return false;
    //     });
    //
    //     form.on('submit(next)', function (data){
    //         $("#form").hide();
    //         $("#form1").show();
    //         element.progress('pro', '100%');
    //         $("#header").text("设置密码");
    //         $("#header").css("textAlign","right");
    //         return false;
    //     })
    //     $("#sendCaptcha").click(function () {
    //         $("#sendCaptcha").attr("disabled",true);
    //         let time=60;
    //         let interval= setInterval(function () {
    //             $("#sendCaptcha").text(time+"秒后重新发送！");
    //             time--;
    //             if (time==0){
    //                 $("#sendCaptcha").attr("disabled",false);
    //                 $("#sendCaptcha").text("点击发送验证码");
    //                 clearInterval(interval);
    //             }
    //         },1000);
    //         $.ajax({
    //             type:"post",
    //             url:"sendCaptcha",
    //             data:{
    //                 "tag":"getSessionEmail",
    //                 "opr":"byEmail"
    //             }
    //         });
    //     });
    //     $("#up").click(function (){
    //         $("#form1").hide();
    //         $("#form").show();
    //         $("#header").text("发送验证码");
    //         $("#header").css("textAlign","left");
    //         element.progress('pro', '50%');
    //     })
    //     $("#changePwd").click(function () {
    //         $.ajax({
    //             url:"user",
    //             data:{
    //                 "opr":"changePwd",
    //                 "captcha":$("#captchaText").val(),
    //                 "tag":"getSessionEmail",
    //                 "newPassword":$("#newPassword").val()
    //             },
    //             beforeSend:function(){
    //                 let ii = layer.load();
    //                 //此处用setTimeout演示ajax的回调
    //                 setTimeout(function(){
    //                     layer.close(ii);
    //                 }, 1000);
    //             },
    //             success:function (result) {
    //                 if (result=="failed"){
    //                     layer.msg("验证码错误！");
    //                 }else {
    //                     layer.msg("更改成功");
    //                     $("#changePwd").attr("disabled",true);
    //                 }
    //             }
    //         });
    //     });
    //
    //     form.on('submit(pwdSubmit)', function (data){
    //         return false;
    //     })
    // })
</script>
</body>
</html>
